<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>百顺通云-后台用户管理</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- 公用CSS文件引入 -->
        <jsp:include page="../../admin/commonCSS.jsp"></jsp:include>
        <!-- 树节点插件 -->
        <link href="/cdn/zTree_v3/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">        
        <!-- 局部css -->
        <link href="/css/admin/productManager.css" rel="stylesheet" type="text/css"/>
 
    </head>
    <body class="skin-blue">
        
		<!-- 公用头部 -->
        <jsp:include page="../../admin/commonHeader.jsp"></jsp:include>
        
        <div class="wrapper row-offcanvas row-offcanvas-left">
            
            <!-- 公用导航 -->
            <jsp:include page="../../admin/commonMenu.jsp"></jsp:include>

            <!-- Right side column. Contains the navbar and content of the page -->
            <aside class="right-side">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>产品管理列表<small>商品分类列表</small></h1>
                    <ol class="breadcrumb">
                        <li><a href="#"><i class="fa fa-dashboard"></i>首页</a></li>
                        <li class="active">产品管理</li>
                        <li class="active">商品类目设置</li>
                    </ol>
                </section>

                <!-- Main content -->
                <section class="content" id="goodsSort">
                    <!-- Small boxes (Stat box) -->
					<div class="row">
					  <div class="col-sm-2 treebox">
					  	<div class="showcategory">
					  		<ul id="treeDemo" class="ztree"></ul>
					  	</div>
					  </div>
					  <div class="col-sm-9 rightpart pull-right">
					  	<div id="sec1">
							<div class="prettyTab">
								<div class="btn-group">
								  <button type="button" class="btn btn-default prettyTabNav tabtable">下级分类列表</button>
								  <button type="button" class="btn btn-default prettyTabNav tabdetail">分类详情</button>
								</div>
								<div class="prettyTabCont">
									<div class="prettyTabItem" id="categorylist">
										<div id="operator">
											<div class="soft">
												<label>商品分类名称：</label>
												<input type="text" class="form-control input-sm softinput" placeholder="商品分类名称">
												<button type="button" class="btn btn-default confirmsoft">查询</button>
											</div>
									  		<button type="button" class="btn btn-default addcategory">新增下级分类</button>
									  		<button type="button" class="btn btn-default editcategory">编辑</button>
									  		<button type="button" class="btn btn-default deletecategory">删除</button>
									  	</div>
										<div class="bstable">
									  		<table class="table table-bordered" id="categorytable">
										      <thead>
										        <tr>
										          <th>
												      <label class="icheck checkall">
												      	<input type="checkbox" class="simple">
												      	<span>全选</span>
												      </label>
										          </th>
										          <th>序号</th>
										          <th>
										          	<span class="filter filterno">商品分类编号</span>
										          	<i class="fa fa-fw fa-sort-desc"></i>
										          </th>
										          <th>
										          	<span class="filter filtername">商品分类名称</span>
										          	<i class="fa fa-fw fa-sort-desc"></i>
										          </th>
										          <th>
										          	<span class="filter filtertime">创建时间</span>
										          	<i class="fa fa-fw fa-sort-desc"></i>
										          </th>
										          <th>
										          	<span class="filter filternote">备注</span>
										          	<i class="fa fa-fw fa-sort-desc"></i>
										          </th>
										        </tr>
										      </thead>
										      <tbody>
										      
										      </tbody>
										    </table>
										    <div id="pagesbox"></div>
								  		</div><!-- .bstable 结束 -->
									</div><!-- prettyTabItem 结束  -->
									<div class="prettyTabItem">
										<div id="categorydetail">
									  		<div class="row">
									  			<div class="col-md-6 formarea">
										  			<form class="form-horizontal" role="form">
													  <div class="form-group">
													    <label for="inputEmail3" class="col-sm-4 control-label">商品分类编号：</label>
													    <div class="col-sm-8">
													      <input type="text" class="form-control input-sm" placeholder="请根据一定规则手动输入">
													    </div>
													  </div>
													  <div class="form-group">
													    <label for="inputPassword3" class="col-sm-4 control-label">商品分类名称：</label>
													    <div class="col-sm-8">
													      <input type="text" class="form-control input-sm" placeholder="商品分类名称">
													    </div>
													  </div>
													  <div class="form-group">
													    <label for="inputPassword3" class="col-sm-4 control-label">上级分类名称：</label>
													    <div class="col-sm-8">
													      	<select class="form-control input-sm ptype" style="display:none;">
													      	  <option value="-1" data-level="0">全部</option>
															  <c:forEach items="${goodsTypeList}" var="gtl">
						                                   	 	<option value="${gtl.typeId}" data-level="${gtl.typeLevel}">${gtl.typeName}</option>
						                                   	  </c:forEach>
															</select>
															<div class="selTreeCombine">
																<input type="text" class="form-control input-sm" placeholder="上级分类名称">
																<div class="seltreebox" style="display:none;">
																	<ul id="categoryTree0" class="categoryTree ztree">
																		<li>asdf</li>
																	</ul>
																</div>
															</div>
													    </div>
													  </div>
													  <div class="form-group"></div>
													  <div class="form-group">
													    <label for="inputPassword3" class="col-sm-4 control-label">创建时间：</label>
													    <div class="col-sm-8">
													      <input class="form-control" type="text" placeholder="选择时间" readOnly>
													    </div>
													  </div>
													  <div class="form-group">
													    <label for="inputPassword3" class="col-sm-4 control-label">备注：</label>
													    <div class="col-sm-8">
															<textarea class="form-control" rows="3"></textarea>
													    </div>
													  </div>
													  <div class="form-group">
													    <div class="col-sm-offset-4 col-sm-10" id="editoperator">
													      <button type="button" class="btn btn-default confirm">确定</button>
													      <button type="button" class="btn btn-default cancel">取消</button>
													    </div>
													  </div>
													</form>
												</div>
									  		</div>
									  	</div><!-- #addcategorybox 结束 -->
									</div><!-- prettyTabItem 结束  -->	
								</div><!-- prettyTabCont 结束 -->
							</div>
						</div><!-- #sec1 结束 -->
						<div id="sec2" style="display:none;">
							<!-- 新增下级分类 -->
							<div id="newcategory">
							  <form class="form-horizontal formarea" role="form">
								  <div class="form-group">
								    <label for="inputEmail3" class="col-sm-2 control-label">商品分类编号：</label>
								    <div class="col-sm-4">
								      <input type="text" class="form-control input-sm typenum" placeholder="请输入1~1000的正整数" >
								    </div>
								  </div>
								  <div class="form-group">
								    <label for="inputPassword3" class="col-sm-2 control-label">商品分类名称：</label>
								    <div class="col-sm-4">
								      <input type="text" class="form-control input-sm" placeholder="商品分类名称">
								    </div>
								  </div>
								  <div class="form-group">
								    <label for="inputPassword3" class="col-sm-2 control-label">上级分类名称：</label>
								    <div class="col-sm-4">
								       <select class="form-control input-sm ptype" style="display:none;">
								      	  <option value="-1" data-level="0">全部</option>
										  <c:forEach items="${goodsTypeList}" var="gtl">
	                                   	 	<option value="${gtl.typeId}"  data-level="${gtl.typeLevel}">${gtl.typeName}</option>
	                                   	  </c:forEach>
										</select>
										<div class="selTreeCombine">
											<input type="text" class="form-control input-sm" placeholder="上级分类名称">
											<div class="seltreebox" style="display:none;">
												<ul id="categoryTree1" class="categoryTree ztree">
												</ul>
											</div>
										</div>
								    </div>
								  </div>
								  <div class="form-group"></div>
								  <div class="form-group">
								    <label for="inputPassword3" class="col-sm-2 control-label">备注：</label>
								    <div class="col-sm-4">
										<textarea class="form-control" rows="3"></textarea>
								    </div>
								  </div>
								  <div class="form-group">
								    <div class="col-sm-offset-2 col-sm-10">
								      <a type="button" class="btn btn-default confirm">确定</a>
								      <a type="button" class="btn btn-default cancel">取消</a>
								    </div>
								  </div>
								</form>
							</div><!-- 新增下级分类 结束 -->
						</div>
					  </div>
					  
					</div>
                </section><!-- /.content -->
            </aside><!-- /.right-side -->
        </div><!-- ./wrapper -->
        
        <!-- 公用js文件引入 -->
        <jsp:include page="../../admin/commonJs.jsp"></jsp:include>
		<script type="text/javascript">
		var zNodes = [{id:-1,pId:0,name:"全部",open:true}];
		$.ajax({
			type:"POST",
			url:"/sysAdmin/goodsTypeAdmin/selectGoodsType",
			async:false,
			dataType:"json",
			success:function(data,response){
				var goodsTypeList = data.goodsTypeList;
				
				for(var i=0;i<goodsTypeList.length;i++){
					var gt = goodsTypeList[i];
					var id = gt.typeId;
					var pId = gt.parentId;
					var name = gt.typeName;
					var open = false;
					if(pId == -1) open = true;
					
					var znode = {
						id : id,
						pId : pId,
						name : name,
						open : open
					};
					zNodes.push(znode);
				}
			}
		});
		var currentMenu = 'productManager';
		var SYSTEM = {
				zNodes:zNodes
		}; 
		</script>
		
		<!-- 树节点插件 -->
		<script type="text/javascript" src="/cdn/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
		<!-- 局部js文件 -->
		<script src="/js/admin/productManager/productManager.js"></script>
    </body>
</html>